"use client"

import EditContext, { OnFinishData } from "@/components/EditContext"
import UiAlert from "@/components/ui/UiAlert"
import { gql, useMutation } from "@apollo/client"
import { Button } from "@radix-ui/themes"
import { useCallback, useState } from "react"

const Query = gql`
    mutation OnUpload($title:String!,$subTitle:String!,$context:String!){
        publishPost(title:$title,subTitle:$subTitle,context:$context){
            hash_key
        }
    }
`
const CreateComponent = () => {
    const [open, setOpen] = useState(false)
    const [description, setDescription] = useState("未知错误")
    const onCancel = useCallback(() => setOpen(false), []);
    const onClick = useCallback(() => {
        setOpen(true)
    }, [])
    const [onUpload] = useMutation(Query, {
        onError(error, clientOptions) {
            setOpen(true);
            setDescription(error.message)
        },
        onCompleted(data, clientOptions) {
            console.log(data)
        },
    })
    const onFinish = useCallback(async (variables: OnFinishData) => {
        console.log(JSON.parse(variables.context))
        onUpload({
            variables
        })
    }, [])
    return (
        <>
            <EditContext
                onFinish={onFinish}
            />
        </>
    )
}
export default CreateComponent